<div class="main-container" id="main-container">

    <div class="main-container-inner">

        <#include "backend/common/page/sidebar.html"/>

        <div class="main-content">
            <div class="breadcrumbs" id="breadcrumbs">

                <ul class="breadcrumb">
                    <li>
                        <i class="icon-home home-icon"></i>
                        <a href="#">首页</a>
                    </li>
                    <li class="active">控制台</li>
                </ul><!-- .breadcrumb -->

                <!-- <div class="nav-search" id="nav-search">
                    <form class="form-search">
                        <span class="input-icon">
                            <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
                            <i class="icon-search nav-search-icon"></i>
                        </span>
                    </form>
                </div><!-- #nav-search -->
            </div>

            <div class="page-content">
                <div class="page-header">
                    <h1>
                        订单列表
                    </h1>
                </div><!-- /.page-header -->

                <div class="row">
                    <div class="col-xs-12">
                        <div class="table-header">
                            订单历史
                        </div>

                        <div class="table-responsive">
                            <div id="sample-table-2_wrapper" class="dataTables_wrapper" role="grid">
                                <table id="sample-table-2" class="table table-striped table-bordered table-hover dataTable" aria-describedby="sample-table-2_info">
                                    <thead>
                                    <tr role="row">
                                        <th class="center sorting_disabled" role="columnheader" rowspan="1" colspan="1" aria-label="" style="width: 111.021px;">
                                            订单号
                                        </th>
                                        <th  role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1"
                                             aria-label="Domain: activate to sort column ascending" style="width: 293.021px;">买家手机</th>
                                        <th  role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1"
                                             aria-label="Price: activate to sort column ascending" style="width: 200.021px;">买家邮箱</th>
                                        <th class="hidden-480" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1"
                                            colspan="1" aria-label="Clicks: activate to sort column ascending" style="width: 216.021px;">订单价格</th>
                                        <th  role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1" colspan="1"
                                             aria-label="

															Update
														: activate to sort column ascending"
                                             style="width: 318.021px;">
                                            <i class="icon-time bigger-110 hidden-480"></i>
                                            创建时间
                                        </th>
                                        <th class="hidden-480" role="columnheader" tabindex="0" aria-controls="sample-table-2" rowspan="1"
                                            colspan="1" aria-label="Status: activate to sort column ascending" style="width: 325.021px;">订单状态</th>
                                        <th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" aria-label="" style="width: 294.021px;">操作</th>
                                    </tr>
                                    </thead>


                                    <tbody role="alert" aria-live="polite" aria-relevant="all">
                                    <tr class="odd" v-for="item in list" :key="item.orderNo">
                                        <td class="center  sorting_1">
                                            {{item.orderNo}}
                                        </td>

                                        <td class=" ">
                                            <a href="#"> {{item.buyerPhone}}</a>
                                        </td>
                                        <td class=" "> {{item.buyerEmail}}</td>
                                        <td class="hidden-480 ">￥  {{item.payment}}</td>
                                        <td class=" "> {{item.createTime}}</td>

                                        <td class="hidden-480 ">
                                            <span class="label label-sm label-warning"> {{item.orderStatus}} </span>
                                        </td>

                                        <td class=" ">
                                            <div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
                                                <a class="blue" :href=" '/store/order/detail/' + item.orderNo ">
                                                    订单详情
                                                </a>

                                            </div>

                                            <div class="visible-xs visible-sm hidden-md hidden-lg">
                                                <div class="inline position-relative">
                                                    <button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown">
                                                        <i class="icon-caret-down icon-only bigger-120"></i>
                                                    </button>

                                                    <ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
                                                        <li>
                                                            <a href="#" class="tooltip-info" data-rel="tooltip" title="" data-original-title="View">
																			<span class="blue">
																				<i class="icon-zoom-in bigger-120"></i>
																			</span>
                                                            </a>
                                                        </li>

                                                        <li>
                                                            <a href="#" class="tooltip-success" data-rel="tooltip" title="" data-original-title="Edit">
																			<span class="green">
																				<i class="icon-edit bigger-120"></i>
																			</span>
                                                            </a>
                                                        </li>

                                                        <li>
                                                            <a href="#" class="tooltip-error" data-rel="tooltip" title="" data-original-title="Delete">
																			<span class="red">
																				<i class="icon-trash bigger-120"></i>
																			</span>
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="dataTables_info" id="sample-table-2_info">当前第 {{pageNum}} 页，共 {{total}} 条记录</div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="dataTables_paginate paging_bootstrap">
                                            <ul class="pagination">
                                                <li :class="{disabled: notHasPreviousPage, prev: true}"><a  @click="handleLeftClick"><i class="icon-double-angle-left"></i></a></li>
                                                <li v-for="(item, index) of navigatepageNums" :key="index" :class="{ 'active': item == pageNum }"><a @click="handleNumber(item)">{{item}}</a></li>
                                                <li :class="{disabled: notHasNextPage, next: true}"><a @click="handleRightClick"><i class="icon-double-angle-right"></i></a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /.row -->

            </div>
        </div>

    </div><!-- /.main-container-inner -->

    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="icon-double-angle-up icon-only bigger-110"></i>
    </a>
</div><!-- /.main-container -->